<template>
	<view>
		<view v-for="(items,index) in postArray" :key="index">
			<view class="recommend-bigbox-1" v-if="items.type===1">
				<view class="recommend-1-top">
					<view class="flex top1">
						<view class="top1-title">{{items.title}}</view>
						<view class="top1-content">100-150/天</view>
					</view>
					<view class="top2">投道集团</view>
					<view class="flex top3">
						<view class="top3-content">青岛</view>
						<view class="top3-content">30-50岁</view>
					</view>
					<view class="top4">黄岛区峨嵋山路光谷软件园</view>
				</view>
				<view class="recommend-1-btm">
					<view class="flex btm-box">
						<view class="flex btm-box1">
							<view class="btm1-title">招聘情况:</view>
							<view class="btm1-content">1</view>
							<view class="btm1-content2">/2</view>
						</view>
						<view class="flex btm-box2">
							<view class="img-box"><img src="../../static/icon/icon_recommend.png" alt="" class="img"></view>
							<view class="btm2-btn">一键推荐</view>
						</view>
					</view>
				</view>
			</view>
			<view class="recommend-bigbox-2" v-if="items.type===2">
				<view class="recommend-2-top">
					<view class="flex top1">
						<view class="top1-title">{{items.title}}</view>
						<view class="top1-content">100-150/天</view>
					</view>
					<view class="top2">投道集团</view>
					<view class="flex top3">
						<view class="top3-content">青岛</view>
						<view class="top3-content">30-50岁</view>
					</view>
					<view class="top4">黄岛区峨嵋山路光谷软件园</view>
				</view>
				<view class="recommend-2-btm">
					<view class="flex btm-box">
						<view class="flex btm-box1">
							<view class="btm1-title">招聘情况:</view>
							<view class="btm1-content">1</view>
							<view class="btm1-content2">/2</view>
						</view>
						<view class="flex btm-box2">
							<view class="img-box"><img src="../../static/icon/icon_checked.png" alt="" class="img"></view>
							<view class="btm2-btn">已推荐</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			postArray:{
				type:Array
			}
		}
	}
</script>

<style scoped lang="stylus">
	.recommend-bigbox-1{
		height:398upx;
		background:#fff;
		margin-bottom:20upx;
		.recommend-1-top{
			height:308upx;
			padding:40upx 40upx 30upx 40upx;
			.top1{
				justify-content space-between
				.top1-title{
					font-size:36upx;
					font-weight:500;
					color:rgba(51,51,51,1);
				}
				.top1-content{
					font-size:30upx;
					font-weight:500;
					color:rgba(208,2,27,1);
				}
			}
			.top2{
				font-size:28upx;
				font-weight:400;
				margin:20upx 0;
				color:rgba(102,102,102,1);
			}
			.top3{
				.top3-content{
					height:40upx;
					line-height 40upx;
					text-align center;
					background:#F3F3F3;
					padding:0 12upx;
					margin-right:20upx;
					font-size 26upx;
					color:#999;
				}
			}
			.top4{
				font-size:28upx;
				font-weight:400;
				margin-top:30upx;
				color:rgba(102,102,102,1);
			}
		}
		.recommend-1-btm{
			height:88upx;
			border-top:2upx solid #DBDBDB;
			.btm-box{
				justify-content space-between;
				// align-items:center;
				.btm-box1{
					margin-left:50upx;
					margin-top:24upx;
					.btm1-title{
						font-size:28upx;
						font-weight:400;
						color:rgba(102,102,102,1);
						margin-right:20upx;
					}
					.btm1-content{
						font-size:32upx;
						font-weight:400;
						color:rgba(74,144,226,1);
						margin-bottom:8upx;
					}
					.btm1-content2{
						margin-bottom:8upx;
						font-size:32upx;
						font-weight:400;
						color:#333;
					}
				}
				.btm-box2{
					height:54upx;
					width:200upx;
					margin-right:40upx;
					margin-top:16upx;
					align-items:center;
					// justify-content space-around;
					background:linear-gradient(90deg,rgba(74,144,226,1) 0%,rgba(0,102,220,1) 100%);
					.img-box{
						height:32upx;
						width:32upx;
						margin-left:24upx;
						.img{
							height:32upx;
							width:32upx;
							margin-bottom:20upx;
						}
					}
					.btm2-btn{
						margin-left:12upx;
						font-size:28upx;
						font-weight:400;
						color:rgba(255,255,255,1);
					}
				}
			}
			
		}
	}
	.recommend-bigbox-2{
		height:398upx;
		background:#fff;
		margin-bottom:20upx;
		.recommend-2-top{
			height:308upx;
			padding:40upx 40upx 30upx 40upx;
			.top1{
				justify-content space-between
				.top1-title{
					font-size:36upx;
					font-weight:500;
					color:#999
				}
				.top1-content{
					font-size:30upx;
					font-weight:500;
					color:#999;
				}
			}
			.top2{
				font-size:28upx;
				font-weight:400;
				margin:20upx 0;
				color:#999;
			}
			.top3{
				.top3-content{
					height:40upx;
					line-height 40upx;
					text-align center;
					background:#F3F3F3;
					padding:0 12upx;
					margin-right:20upx;
					font-size 26upx;
					color:#999;
				}
			}
			.top4{
				font-size:28upx;
				font-weight:400;
				margin-top:30upx;
				color:#999;
			}
		}
		.recommend-2-btm{
			height:88upx;
			border-top:2upx solid #DBDBDB;
			.btm-box{
				justify-content space-between;
				// align-items:center;
				.btm-box1{
					margin-left:50upx;
					margin-top:24upx;
					.btm1-title{
						font-size:28upx;
						font-weight:400;
						color:#999;
						margin-right:20upx;
					}
					.btm1-content{
						font-size:32upx;
						font-weight:400;
						color:#999;
						margin-bottom:8upx;
					}
					.btm1-content2{
						margin-bottom:8upx;
						font-size:32upx;
						font-weight:400;
						color:#999;
					}
				}
				.btm-box2{
					height:54upx;
					width:200upx;
					margin-right:40upx;
					margin-top:16upx;
					align-items:center;
					// justify-content space-around;
					background:#EAEAEA;
					.img-box{
						height:32upx;
						width:32upx;
						margin-left:38upx;
						.img{
							height:32upx;
							width:32upx;
							margin-bottom:20upx;
						}
					}
					.btm2-btn{
						margin-left:12upx;
						font-size:30upx;
						font-weight:500;
						color:#666;
					}
				}
			}
			
		}
	}
</style>
